import AddTodoForm from "./components/AddTodoForm";
import TodoList from "./components/TodoList";
import TodoSummary from "./components/TodoSummary";
import useTodos from "./hooks/useTodos";

export default function App() {
  const { todos, handleToggle, handleAddTodo, handleDelete } = useTodos();

  return (
    <main className='py-10 px-5 bg-white h-screen space-y-5'>
      <h1 className="text-3xl text-center font-bold ">Your Todos</h1>
      <div className="max-w-lg mx-auto bg-slate-100 p-5 rounded-md space-y-6">
        <AddTodoForm onAdd={handleAddTodo} />
        <TodoList todos={todos} handleToggle={handleToggle} onDelete={handleDelete} />
      </div>
      <TodoSummary todos={todos} />
    </main >
  )
}
